<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in arr">{{item}}</li>
			</ul>
			<span>方法来实现数组的和：{{sum()}}</span><br>
			<span>方法来实现数组的和：{{sum()}}</span>
			
			<div></div>
			<span>计算属性来实现数组的和：{{csum}}</span><br>
			<!-- 计算属性带有缓存，性能比方法要好 -->
			<span>计算属性来实现数组的和：{{csum}}</span>
			
			<div>
				计算属性传值
			</div>
			<span>计算属性来实现数组的和：{{c1}}</span><br>
			<span>计算属性来实现数组的和：{{c2(1,2)}}</span><br>
			<span>计算属性来实现数组的和：{{c2(1,2)}}</span><br>
			<span>c3:{{c3}}</span><br>
			<button type="button" @click="c3 = 99">给c3点击赋值</button>
		</div>
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app = new Vue({
				el:"#app",
				data:{
					msg:"这是个消息",
					arr:[1,3,6,4]
				},
				methods:{
					sum(){
						let sum = 0;
						for(let item of this.arr){
							sum += item;
						}
						return sum;
					}
				},
				computed:{
					csum(){
						let sum = 0;
						for(let item of this.arr){
							sum += item;
						}
						return sum;
					},
					c1(msg){
						//msg: 就是vue实例本身。vue不需要传，直接通过this获取
					},
					c2(){
						/* 
							JS方法的返回值
								普通类型，数字number、字符串string、boolean等
								void：没有返回值
								返回函数,一般是返回匿名函数
						 */
						console.log("c2-------1")
						return function(a,b){
							console.log("c2-------1")
							return a + b;
						}
					},
					c3:{
						get:function(){
							// return this.msg;
						},
						set: function(newValue){
							console.log(newValue);
							// this.msg = newValue
						}
					}
				},
				watch: {
					msg: function(){
						console.log("msg已经变化")
					},
					c3: function(){
						console.log("msg已经变化")
					}
				}
			})
		</script>
		
	</body>
</html>
